<template>
  <div class="hello">
    <div class="register-from">
      <h1>金辉中文网</h1>
      <input type="text" placeholder="用户名" name="username" v-model="username">
      <input type="password" placeholder="密码" name="password" v-model="password">
      <button class="register" @click="register">注册</button><br/>
      <router-link :to="{path:'login'}">登陆</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'regist',
  methods: {
      register(){
          alert(this.username + '注册成功!')
      }
  },
  data () {
    return {
      username: 'name',
      password: ''
    }
  }
}
</script>

<style scoped>
  h1{
    -webkit-text-fill-color: cornflowerblue;
  }
  .register-from{
    width: 70%;
    background: whitesmoke;
    margin: auto;
    -webkit-border-radius: 15px;
    text-align: center;
  }
  input[type="text"] {
    width: 70%;
    padding: 1em 2em 1em 3em;
    color: #9199aa;
    font-size: 18px;
    outline: none;
    border: none;
    font-weight: 100;
    border-bottom: 1px solid#484856;
    margin-top: 2em;
  }

  input[type="password"]{
    width: 70%;
    padding: 1em 2em 1em 3em;
    color: #dd3e3e;
    font-size: 18px;
    outline: none;
    border: none;
    font-weight: 100;
    border-bottom: 1px solid#484856;
    margin-bottom: 3em;
  }
  .register{
    font-size: 20px;
    color: #fff;
    background: cornflowerblue;
    outline: none;
    border: none;
    width: 50%;
    padding: 15px 0;
    cursor: pointer;
  }
</style>
